<template>
  <div>
  <h1>排房显示</h1>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>房型</td>
        <td>未排</td>
        <td>房号</td>
        <td>操作</td>
      </tr>
      
      <tr v-for="item in info">
        <td>
          <span v-if="item.fx==1">大床房</span>
          <span v-if="item.fx==2">普通房</span>
        </td>
        <td>{{ item.xxHZ }}</td>
        <td>{{ item.hhao }}</td>
        <td>
          <input type="button" value="详情" @click="XQ(item.id)"  class="btn btn-success">
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  共{{ page.pagecount }}条数据，每页显示{{page.size  }}条，当前{{ page.index }}/{{page.pageindex}}页
  <a href="#" @click="p('sy')">首页</a>
  <a href="#" @click="p('ssy')">上一页</a>
  <a href="#" @click="p('dy')">1</a>
  <a href="#" @click="p('de')">2</a>
  <a href="#" @click="p('ds')">3</a>
  <a href="#" @click="p('xyy')">下一页</a>
  <a href="#" @click="p('wy')">尾页</a>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter()

const info=ref([{
  "id": 0,
  "fx": 0,
  "hhao": 0,
  "xxHZ": 0
}])

const page=ref({
  index:1,
  size:2,
  pagecount:0,
  pageindex:0
})

onMounted(()=>{
  Showe();
})
const Showe=()=>{
  axios.get("https://localhost:7177/api/Pf/Show",{
    params:{
      index:page.value.index,
      size:page.value.size,
    }
  })
  .then(res=>{
    info.value=res.data.list,
    page.value.pageindex=res.data.pageindex,
    page.value.pagecount=res.data.pagecount
  })
}
const p=(e:any)=>{
switch(e)
{
  case 'sy':
  if(page.value.index==1)
      {
        alert('当前页是第一页');
        return;
      }
    page.value.index=1;
    break;

    case 'ssy':
      if(page.value.index==1)
      {
        alert('当前页是第一页');
        return;
      }
    page.value.index=page.value.index-1;
    break;


    case 'xyy':
    if(page.value.index==page.value.pageindex)
      {
        alert('当前页是最后一页');
        return;
      }
    page.value.index=page.value.index+1;
    break;


    case 'wy':
    if(page.value.index==page.value.pageindex)
      {
        alert('当前页是最后一页');
        return;
      }
    page.value.index=page.value.pageindex;
    break;

    case 'dy':
    page.value.index=1;
    break;


    case 'de':
    page.value.index=2;
    break;


    case 'ds':
    page.value.index=3;
    break;
}
Showe();
}
const XQ=(id:any)=>{
  router.push({
    path:'/PaiFanView',
    query:{
      id:id,
    }
  })
}
</script>

<style scoped>

</style>